<template>
  <!-- <div class="menu_box"> -->
  <!-- <div :class="{ 'menu_box': !isCollapse, 'menu_box1': isCollapse, }"> -->
  <!-- <div class="del_box" @click="isCollapse = !isCollapse">
          <el-icon v-if="isCollapse">
              <ArrowLeftBold />
          </el-icon>
          <el-icon v-else>
              <ArrowRightBold />
          </el-icon>
      </div> -->
  <!-- {{ defaultPath }} -->
  <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#fff" active-text-color="#000"
    text-color="#000" collapse-transition="false" @open="handleOpen" @select="handleSelect" @close="handleClose"
    unique-opened="true" :router="true" :default-active="defaultPath">
    <section v-for="(item, index) in list">
      <el-sub-menu v-if="item.children.length > 0" :index="index + ''">
        <template #title>
          <!-- <el-icon>
            <component :is="item.icon" />
          </el-icon> -->
          <!-- <Icon :iconName="item.icon" /> -->
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item class="m-menu" v-for="(it, idx) in item.children" :index="it.path" @click="addPathHandle(it)">{{
    it.label
  }}</el-menu-item>
      </el-sub-menu>
      <el-menu-item v-if="item.children.length == 0" :index="item.path" @click="addPathHandle(item)">
        <!-- <Icon :iconName="'o' + item.icon" v-if="defaultPath == item.path" />
        <Icon :iconName="item.icon" v-if="defaultPath != item.path" /> -->

        <!-- <el-icon>
          <component :is="item.icon" />
        </el-icon> -->
        <template #title>
          <span>{{ item.label }}</span>
        </template>
      </el-menu-item>
    </section>
  </el-menu>
  <!-- </div> -->
</template>

<script>
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, } from "element-plus";
import { mapState, mapActions } from 'vuex';
import Icon from '@/components/Icon.vue';
import {
  Link,
} from "@element-plus/icons-vue";

export default {
  name: "Header",
  data() {
    return {
      isCollapse: false,
      list: [],
      flagId: 1,
      defaultPath1: ""

    };
  },

  components: {
    Link, Icon
  },
  computed: {
    ...mapState(['navMenuList', 'isCollapse1', 'defaultPath', 'defaultPath0']), // 映射仓库中的状态到组件
    isCollapse() {
      // alert(1)
      return this.isCollapse1
    },
    defaultPath1() {
      // console.log(this.defaultPath0);
      return this.defaultPath0
    }
  },
  mounted() {
    this.getTreeData();
    console.log();
  },
  watch: {
    defaultPath1(newValue) {
      alert(newValue)
    },
    // watch: {
    //   '$route.query.type'(newVal) {
    //     alert(newVal)
    //     console.log(newVal);
    //     // this.type = newVal;
    //     // 根据需要执行其他操作，比如更新视图或发起请求  
    //   }
    // },
  },
  methods: {
    ...mapActions(['uploadAdd']),
    addPathHandle(data) {
      this.uploadAdd(data)
    },
    handleOpen(key, keyPath) { },
    handleClose(key, keyPath) { },
    handleSelect(index, indexPath) { },
    openOrClose() {
      if (this.isCollapse) {
        this.isCollapse = false;
      } else {
        this.isCollapse = true;
      }
    },
    getTreeData() {
      httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6040" }, "get").then((data) => {
        this.list = data[0].children;
      });
    },
  },
};
</script>

<style>
::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}


.menu_box {
  width: 200px;
  height: calc(100vh - 60px);
  overflow-y: scroll;
  transition: width 0.5s ease-in-out;
}

.custom-menu-width {
  width: 200px;
  /* 设置你想要的宽度 */
}

.menu_box1 {
  width: auto;
  height: calc(100vh - 60px);
  overflow-y: scroll;
}

.menu_box::-webkit-scrollbar {
  width: 0 !important;
}

.menu_box1::-webkit-scrollbar {
  width: 0 !important;
}

.del_box {
  width: 25px;
  height: 40px;
  position: absolute;
  background-color: #adadad !important;
  z-index: 99;
  top: 50%;
  transform: translateY(-50%);
  right: -25px;
  border-radius: 0 25px 25px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.del_box .el-icon {
  margin-left: -5px;
}

.el-menu {
  /* min-width: 200px; */
  padding-right: 1px;
}

.el-sub-menu {
  width: 180px;
}

.el-menu-item {
  /* width: 180px; */
}

.el-sub-menu:not(.el-menu--collapse) {
  width: auto !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: calc(100vh - 60px);
  padding: 10px;
}

.el-menu--collapse {
  min-height: calc(100vh - 60px);
}

.el-aside {
  transition: width 0.05s;
  -webkit-transition: width 0.05s;
  -moz-transition: width 0.05s;
  -webkit-transition: width 0.05s;
  -o-transition: width 0.05s;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /* height: 100%; */
}

.el-menu-item.is-active {
  /* width: 180px; */
  background-color: #007EFF;
  color: #fff;
  border-radius: 3px;
}

.m-menu.is-active {
  /* width: 180px; */
  padding-left: 40px !important;
  /* padding-right: 40px; */
  background-color: #007EFF;
  color: #fff;
  border-radius: 3px;
}


.el-menu--collapse .el-sub-menu__title span {
  display: none;
}

.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}
</style>